<!--------------------------------
 - @Author: Ronnie Zhang
 - @LastEditor: Ronnie Zhang
 - @LastEditTime: 2023/12/05 21:29:56
 - @Email: zclzone@outlook.com
 - Copyright © 2023 Ronnie Zhang(大脸怪) | https://isme.top
 --------------------------------->

<template>
  <CommonPage>
    <MeCrud ref="$table" v-model:query-items="queryItems" :scroll-x="1200" :columns="columns" :get-data="api.read">
      <MeQueryItem label="商品名" :label-width="50">
        <n-input v-model:value="queryItems.goodsName" type="text" placeholder="请输入用户名" clearable />
      </MeQueryItem>
    </MeCrud>
  </CommonPage>
</template>

<script setup>
import { NAvatar, NButton, NTag } from 'naive-ui'
import api from './api'
import { MeCrud, MeQueryItem } from '@/components'

defineOptions({ name: 'GoodsMgt' })

const $table = ref(null)
/** QueryBar筛选参数（可选） */
const queryItems = ref({})

onMounted(() => {
  $table.value?.handleSearch()
})

const columns = [
  { title: '订单号', key: 'order.orderNum', width: 150 },
  {
    title: '待退金额',
    key: 'refundMoney',
    width: 150,
  },
  {
    title: '已退金额',
    key: 'refundedMoney',
    width: 150,
  },
  {
    title: '退款原因',
    key: 'refundReason',
    width: 150,
  },
  {
    title: '退款状态',
    key: 'refundStatusName',
    width: 80,
  },
  {
    title: '创建时间',
    key: 'createTime',
    width: 180,
  },
  {
    title: '操作',
    key: 'actions',
    width: 320,
    render(row) {
      return [
        h(
          NButton,
          {
            type: 'error',
            secondary: true,
            // onClick: () => handleOpenRolesSet(row),
          },
          {
            default: () => '确认退款',
            icon: () => h('i', { class: 'i-carbon:user-role text-14' }),
          },
        ),
      ]
    },
  },
]
</script>
